<template>
  <div v-loading="loading">
    <div class="video_title">
      <van-icon name="arrow-left" class="icon" @click="goBack" />
      <!-- <p>随堂考试</p> -->
      <p v-if="gz!='fj'">
        <van-count-down
          :time="time"
          format="mm:ss"
          @change="timeChange"
          ref="time"
          style="color: #fff"
          @finish="finishTime"
        />
      </p>
    </div>
    <div
      style="
        padding: 0.75rem;
        background: #fff;
        height: calc(100vh - 94px);
        overflow-y: auto;
        overflow-x: hidden;
      "
    >
      <div
        class="titleBox"
        :style="!Current.stem_img ? 'margin-bottom:2.125rem;' : ''"
      >
        <span
          ><p>{{ qtype }}</p>
          {{ Current.stem }}</span
        >
      </div>
      <div
        style="
          line-height: 8.75rem;
          display: inline-block;
          height: 8.75rem;
          margin-bottom: 2.125rem;
        "
        v-if="Current.stem_img"
      >
        <img
          :src="Current.stem_img"
          @click="openImg([Current.stem_img])"
          style="height: 100%"
          alt=""
        />
      </div>
      <div style="margin-left: 5px">
        <van-checkbox-group
          v-model="checkList"
          v-if="qtype == '多选'"
          :disabled="disabled"
          @change="danChange(Current)"
        >
          <div v-for="(item, index) in Current.tiList" :key="index">
            <van-checkbox v-if="item.content" :name="item.cred">
              <span style="padding: 6px 0; display: inline-block"
                >{{ item.content
                }}<img
                  v-if="item.content_img"
                  style="max-width: 100px; max-height: 100px"
                  :src="item.content_img"
                  alt=""
              /></span>
              <template #icon="props">
                <template v-if="props.checked">
                  <img
                    class="img-icon"
                    v-if="!disabled"
                    :src="require(`@/assets/mobile/exam/${item.cred}-O.png`)"
                  />
                  <img
                    class="img-iconA"
                    v-else
                    :src="
                      errORpass
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/error.png`)
                    "
                  />
                </template>
                <template v-else>
                  <img
                    class="img-icon"
                    v-if="!disabled"
                    :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                  />
                  <img
                    :class="
                      daan && Current.answer == item.cred
                        ? 'img-iconA'
                        : 'img-icon'
                    "
                    v-else
                    :src="
                      daan && Current.answer == item.cred
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/${item.cred}.png`)
                    "
                  />
                </template>
              </template>
            </van-checkbox>
          </div>
        </van-checkbox-group>
        <van-radio-group
          v-model="daan"
          v-if="qtype == '单选'"
          @change="danChange(Current)"
          :disabled="disabled"
        >
          <!--  -->
          <div v-for="(item, index) in Current.tiList" :key="index">
            <van-radio v-if="item.content" :name="item.cred">
              <span style="padding: 6px 0; display: inline-block"
                >{{ item.content
                }}<img
                  v-if="item.content_img"
                  style="max-width: 100px; max-height: 100px"
                  :src="item.content_img"
                  alt=""
              /></span>
              <template #icon="props">
                <template v-if="props.checked">
                  <img
                    class="img-icon"
                    v-if="!disabled"
                    :src="require(`@/assets/mobile/exam/${item.cred}-O.png`)"
                  />
                  <img
                    class="img-iconA"
                    v-else
                    :src="
                      errORpass
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/error.png`)
                    "
                  />
                </template>
                <template v-else>
                  <img
                    class="img-icon"
                    v-if="!disabled"
                    :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                  />
                  <img
                    :class="
                      daan && Current.answer == item.cred
                        ? 'img-iconA'
                        : 'img-icon'
                    "
                    v-else
                    :src="
                      daan && Current.answer == item.cred
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/${item.cred}.png`)
                    "
                  />
                </template>
              </template>
            </van-radio>
          </div>
        </van-radio-group>
        <van-radio-group
          v-model="daan"
          v-if="qtype == '判断'"
          @change="danChange(Current)"
          :disabled="disabled"
        >
          <template v-if="!disabled">
            <van-radio name="正确" class="pd"> 正确 </van-radio>
            <van-radio name="错误" class="pd"> 错误 </van-radio>
          </template>
          <template v-else>
            <van-radio name="正确" class="pd">
              正确
              <template #icon="props">
                <template v-if="props.checked">
                  <img
                    class="img-iconA"
                    :src="
                      errORpass
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/error.png`)
                    "
                  />
                </template>
                <template v-else>
                  <img
                    :class="'img-iconA'"
                    :src="
                      daan && Current.answer == '正确'
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/PD.png`)
                    "
                  />
                </template>
              </template>
            </van-radio>
            <van-radio name="错误" class="pd">
              错误
              <template #icon="props">
                <template v-if="props && props.checked">
                  <img
                    class="img-iconA"
                    :src="
                      errORpass
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/error.png`)
                    "
                  />
                </template>
                <template v-else>
                  <img
                    :class="'img-iconA'"
                    :src="
                      daan && Current.answer == '错误'
                        ? require(`@/assets/mobile/exam/pass.png`)
                        : require(`@/assets/mobile/exam/PD.png`)
                    "
                  />
                </template>
              </template>
            </van-radio>
          </template>
        </van-radio-group>
        <div v-if="Current.qtype == '案例'">
          <div
            v-for="itemS in Current.children"
            :key="itemS.id"
            style="margin-bottom: 28px"
            v-show="!itemS.noerror"
          >
            <div
              class="titleBox"
              :style="!itemS.stem_img ? 'margin-bottom:2.125rem;' : ''"
            >
              <span
                ><p>{{ itemS.qtype }}</p>
                {{ itemS.stem }}</span
              >
            </div>
            <div
              style="
                line-height: 8.75rem;
                display: inline-block;
                height: 8.75rem;
                margin-bottom: 2.125rem;
              "
              v-if="itemS.stem_img"
            >
              <img :src="itemS.stem_img" style="height: 100%" alt="" />
            </div>
            <div style="margin-left: 5px">
              <van-checkbox-group
                v-model="itemS.checkList"
                v-if="itemS.qtype == '多选'"
                :disabled="disabled"
                @change="danChange({ pid: Current.id, ...itemS })"
              >
                <div v-for="(item, index) in itemS.childrenti" :key="index">
                  <van-checkbox v-if="item.content" :name="item.cred">
                    <img
                      v-if="item.content_img"
                      style="max-width: 100px; max-height: 100px"
                      :src="item.content_img"
                      alt=""
                    />
                    <span v-else>{{ item.content }}</span>
                    <template #icon="props">
                      <template v-if="props.checked">
                        <img
                          class="img-icon"
                          v-if="!disabled"
                          :src="
                            require(`@/assets/mobile/exam/${item.cred}-O.png`)
                          "
                        />
                        <img
                          class="img-iconA"
                          v-else
                          :src="
                            errORpass
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/error.png`)
                          "
                        />
                      </template>
                      <template v-else>
                        <img
                          class="img-icon"
                          v-if="!disabled"
                          :src="
                            require(`@/assets/mobile/exam/${item.cred}.png`)
                          "
                        />
                        <img
                          :class="
                            daan && Current.answer == item.cred
                              ? 'img-iconA'
                              : 'img-icon'
                          "
                          v-else
                          :src="
                            daan && Current.answer == item.cred
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/${item.cred}.png`)
                          "
                        />
                      </template>
                    </template>
                  </van-checkbox>
                </div>
              </van-checkbox-group>
              <van-radio-group
                v-model="itemS.uanswer"
                v-if="itemS.qtype == '单选'"
                @change="danChange({ pid: Current.id, ...itemS })"
                :disabled="disabled"
              >
                <!--  -->
                <div v-for="(item, index) in itemS.childrenti" :key="index">
                  <van-radio v-if="item.content" :name="item.cred">
                    <img
                      v-if="item.content_img"
                      style="max-width: 100px; max-height: 100px"
                      :src="item.content_img"
                      alt=""
                    />
                    <span v-else>{{ item.content }}</span>
                    <template #icon="props">
                      <template v-if="props.checked">
                        <img
                          class="img-icon"
                          v-if="!disabled"
                          :src="
                            require(`@/assets/mobile/exam/${item.cred}-O.png`)
                          "
                        />
                        <img
                          class="img-iconA"
                          v-else
                          :src="
                            errORpass
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/error.png`)
                          "
                        />
                      </template>
                      <template v-else>
                        <img
                          class="img-icon"
                          v-if="!disabled"
                          :src="
                            require(`@/assets/mobile/exam/${item.cred}.png`)
                          "
                        />
                        <img
                          :class="
                            daan && Current.answer == item.cred
                              ? 'img-iconA'
                              : 'img-icon'
                          "
                          v-else
                          :src="
                            daan && Current.answer == item.cred
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/${item.cred}.png`)
                          "
                        />
                      </template>
                    </template>
                  </van-radio>
                </div>
              </van-radio-group>
              <van-radio-group
                v-model="itemS.uanswer"
                v-if="itemS.qtype == '判断'"
                @change="danChange({ pid: Current.id, ...itemS })"
                :disabled="disabled"
              >
                <template v-if="!disabled">
                  <van-radio name="正确" class="pd"> 正确 </van-radio>
                  <van-radio name="错误" class="pd"> 错误 </van-radio>
                </template>
                <template v-else>
                  <van-radio name="正确" class="pd">
                    正确
                    <template #icon="props">
                      <template v-if="props.checked">
                        <img
                          class="img-iconA"
                          :src="
                            errORpass
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/error.png`)
                          "
                        />
                      </template>
                      <template v-else>
                        <img
                          :class="'img-iconA'"
                          :src="
                            daan && Current.answer == '正确'
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/PD.png`)
                          "
                        />
                      </template>
                    </template>
                  </van-radio>
                  <van-radio name="错误" class="pd">
                    错误
                    <template #icon="props">
                      <template v-if="props && props.checked">
                        <img
                          class="img-iconA"
                          :src="
                            errORpass
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/error.png`)
                          "
                        />
                      </template>
                      <template v-else>
                        <img
                          :class="'img-iconA'"
                          :src="
                            daan && Current.answer == '错误'
                              ? require(`@/assets/mobile/exam/pass.png`)
                              : require(`@/assets/mobile/exam/PD.png`)
                          "
                        />
                      </template>
                    </template>
                  </van-radio>
                </template>
              </van-radio-group>
              <div class="daan_box" v-if="isDaAn">
                <span>正确答案:{{ itemS.answer }}</span>
                <p v-if="itemS.analysis">解析:{{ itemS.analysis }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="button_box">
        <van-button
          round
          type="info"
          @click="changeClick('end')"
          v-if="enddisabled"
          >上一题</van-button
        >
        <!-- {{num}} -->
        <van-button
          round
          type="info"
          @click="changeClick('add')"
          v-if="downdisabled"
          >下一题</van-button
        >
      </div>

      <div class="daan_box" v-if="isDaAn && Current.qtype != '案例'">
        <span>正确答案:{{ Current.answer }}</span>
        <p v-if="Current.analysis">解析:{{ Current.analysis }}</p>
      </div>
    </div>
    <div class="foot_box">
      <div
        @click="
          () => {
            this.show = !this.show;
          }
        "
      >
        <van-icon name="qr" />
        <span>{{ TIXU }}/{{ Ti.length }}</span>
      </div>
      <!-- <div @click="CollectionClick(DQTI)" v-if="(!titleName||titleName=='模拟考试')&&!this.usererror">
                <van-icon name="star" v-if="isYes"/>
                <van-icon name="star-o" v-else/>
                <span>{{isYes?'取消收藏':'收藏'}}</span>
            </div> -->
      <div>
        <van-button
          round
          type="warning"
          size="small"
          @click="commit"
          v-if="gz!='fj'"
          >交卷</van-button
        >
        <van-button round type="danger" size="small" @click="goBack" v-else
          >退出</van-button
        >
      </div>
    </div>
    <van-action-sheet
      v-model="show"
      title=""
      :closeable="false"
      id="rootBox"
      :transition-appear="true"
      :lazy-render="false"
    >
      <div
        style="
          width: 100%;
          height: 3.19rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
        v-if="!disabled"
      >
        <div class="tICade">
          <div class="TIClass" style="background: #fff"></div>
          <span>未答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #7ed321"></div>
          <span>已答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #175dff"></div>
          <span>当前</span>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 3.19rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
        v-else
      >
        <div class="tICade">
          <div class="TIClass" style="background: #fff"></div>
          <span>未答</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #7ed321"></div>
          <span>正确</span>
        </div>
        <div class="tICade">
          <div class="TIClass" style="background: #f33e34"></div>
          <span>错误</span>
        </div>
      </div>
      <div class="content" id="content">
        <div v-for="(it, index) in TiType" :key="index">
          <div v-if="it.length != 0">
            <span class="TI_title">{{ it[0] ? it[0].qtype : "" }}题 </span>
          </div>
          <van-row>
            <van-col span="4" v-for="item in it" :key="item.tixu">
              <div
                class="XH_box"
                :style="item.type"
                @click="changeTi(item)"
                :id="'Ti-' + item.tixu"
              >
                {{ item.tixu }}
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-action-sheet>
    <!-- <van-dialog v-model="dialogVisible" title="我的成绩" show-cancel-button>
            
        </van-dialog> -->
  </div>
</template>

<script>
import {
  exerAdd,
  exerCollect,
  exerdelCollect,
  quizDone,
  examAdd,
  mockcollect,
  mockcancelcollect,
  resetwrong,
} from "@/api/admin.js";
import { getTi, delTi, getExectSetting } from "@/utils/auth.js";
export default {
  data() {
    return {
      enddisabled: false,
      titleName: this.$route.query.titleName,
      usererror: this.$route.query.usererror, //首页错题集进来的
      show: false,
      radio: "1",
      DQTI: {},
      Ti: [], //所有试题
      TIXU: 1,
      Tistyle: {
        background: "#fff",
        color: "#666",
      }, //未答题样式
      DQTistyle: {
        background: "#175DFF",
        color: "#FFF",
      }, //当前题样式
      YDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //已答题题样式
      DCTistyle: {
        background: "#F33E34",
        color: "#FFF",
      }, //答错题样式
      DDTistyle: {
        background: "#7ED321",
        color: "#FFF",
      }, //答对题样式
      daan: "",
      checkList: [], //多选的vuelue
      Current: {
        mame: "1",
        stem: "",
        tiList: [],
        answer: "",
        analysis: "",
        id: "",
      },
      commitData: [],
      downdisabled: true,
      isDaAn: this.$route.query.daan == "显示",
      Collectionlist: [],
      isYes: false, //默认不收藏
      jjtc: true,
      subjectid: this.$route.query.subjectid, //专业id
      exerid: this.$route.query.exerid,
      quizid: this.$route.query.quizid, //试卷id  唯一
      //模拟考试 正式考试
      getExectSettingData: JSON.parse(getExectSetting()),
      gz: this.$route.query.gz,
      time: Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 * 1000,
      NowTime: 0,
      dialogVisible: true,
      correct: 0, //正确题数
      error: 0, //错误题数
      Unanswered: 0, //未答题数
      fraction: 0, //最终得分
      isjiaojuan: true, //如果已经交卷  则为fales
      loading: false,
      disabled: false, //复卷时禁用答题功能

      examid: this.$route.query.examid, //正式考试 试卷id  唯一
      errORpass: true, //当前题 答案正确还是错误
    };
  },
  methods: {
    goBack() {
      this.$router.push("/study");
    },
    //样式切换
    styleChange(val) {
      this.styleMap();
      this.Ti.map((item) => {
        if (Number(item.name) == val) {
          item.type = this.DQTistyle;
          this.DQTI = item;
          this.funChangeTi(item);
        }
      });
    },
    //点击题号切换试题
    changeTi(item) {
      this.show = false;
      this.DQTI = item;
      this.TIXU = item.name;
      this.funChangeTi(item);
      this.changeClick();
      if (this.TIXU < this.Ti.length) {
        this.downdisabled = true;
      } else {
        this.downdisabled = false;
      }
      this.$forceUpdate();
    },
    swiperleft() {
      this.num++;
      // this.changeClick('add')
    },
    swiperright() {
      this.num--;
    },
    //按钮切换试题
    changeClick(data) {
      this.downdisabled = true;
      this.enddisabled = true;
      if (this.downdisabled && data == "add") {
        this.TIXU = Number(this.DQTI.name) + 1;
      }
      if (this.downdisabled && data == "end") {
        this.TIXU = Number(this.DQTI.name) - 1;
      }
      if (this.Ti.length <= Number(this.TIXU)) {
        this.downdisabled = false;
      }
      if (Number(this.TIXU) <= 1) {
        this.enddisabled = false;
      }
      this.$forceUpdate();
    },
    //试题信息  切换试题时  触发此函数
    funChangeTi(item) {
      let Arr = [];
      Arr.push(
        {
          cred: "A",
          content: item.a,
          content_img: item.a_img,
        },
        {
          cred: "B",
          content: item.b,
          content_img: item.b_img,
        },
        {
          cred: "C",
          content: item.c,
          content_img: item.c_img,
        },
        {
          cred: "D",
          content: item.d,
          content_img: item.d_img,
        },
        {
          cred: "E",
          content: item.e,
          content_img: item.e_img,
        },
        {
          cred: "F",
          content: item.f,
          content_img: item.f_img,
        }
      );
      if (item.children) {
        item.children.map((el) => {
          // if(!el.checkList||el.checkList.length==0){
          //   el.checkList=[]
          // }
          if (!el.childrenti) {
            el.childrenti = [
              {
                cred: "A",
                content: el.a,
                content_img: el.a_img,
              },
              {
                cred: "B",
                content: el.b,
                content_img: el.b_img,
              },
              {
                cred: "C",
                content: el.c,
                content_img: el.c_img,
              },
              {
                cred: "D",
                content: el.d,
                content_img: el.d_img,
              },
              {
                cred: "E",
                content: el.e,
                content_img: el.e_img,
              },
              {
                cred: "F",
                content: el.f,
                content_img: el.f_img,
              },
            ];
          }
        });
      }
      this.Current = {
        name: item.name,
        stem: item.stem,
        tiList: Arr,
        answer: item.answer,
        analysis: item.analysis,
        id: item.id,
        qtype: item.qtype,
        stem_img: item.stem_img,
        children: item.children ? item.children : null,
      };
      //每次切换试题都要重新填写用户相对应的答案
      this.daan = "";
      this.checkList = [];
      this.commitData.map((ite) => {
        if (this.Current.qtype != "案例") {
          if (ite.questionid == item.id) {
            this.daan = ite.uanswer;
            this.checkList = ite.uanswer.split("");
          }
        } else {
          if (ite.pid == item.id) {
            item.children.map((el) => {
              if (el.qtype != "多选") {
                // el.daan=el.uanswer
              } else {
                el.checkList = el.uanswer.split("");
              }
            });
          }
        }
      });
      this.isYes = item.collected ? item.collected : false;
      // this.isYes = false;
      this.Collectionlist.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isYes = true;
        }
      });
      let isshow = this.$route.query.daan == "显示";

      if (this.daan && isshow) {
        this.isDaAn = true;
      }
      if (this.disabled) {
        this.daanStyle(item);
        this.isDaAn = true;
      }
    },
    danChange(data) {
      this.$forceUpdate();
      let obj = JSON.parse(JSON.stringify(data));
      let answer = obj.answer
      if (data.qtype == "多选") {
        this.daan = JSON.parse(JSON.stringify(this.checkList))
          .sort()
          .join("");
          answer = obj.answer.split('').sort().join('')
      }
      let scored; //是否正确   对 1 错 0
      if (this.daan == answer) {
        scored = 1;
      } else {
        scored = 0;
      }
      if (this.Current.qtype == "案例" && data.qtype == "多选") {
          obj.uanswer = obj.checkList.sort().join("");
      }
      var isyes = false;
      this.commitData.map((item) => {
        if (this.commitData.length == 0 || item.questionid == data.id) {
          isyes = true;
          item.pid = obj.pid ? obj.pid : null;
          item.uanswer =
            this.Current.qtype == "案例" ? obj.uanswer : this.daan;
          item.scored = scored;
          item.qtype = data.qtype;
        }
      });
      if (!isyes && (this.daan || obj.uanswer)) {
        this.commitData.push({
          questionid: data.id,
          uanswer: this.Current.qtype == "案例" ? obj.uanswer : this.daan,
          scored,
          qtype: data.qtype,
          pid: obj.pid ? obj.pid : null,
        });
      }
    },
    //收藏 取消收藏
    CollectionClick(data) {
      var isyes = false;
      this.isYes = !this.isYes;
      this.Collectionlist.map((item, index) => {
        if (this.Collectionlist.length == 0 || item.questionid == data.id) {
          isyes = true;
          delete this.Collectionlist[index];
          if (!this.titleName) {
            exerdelCollect({
              subjectid: this.subjectid,
              questionid: data.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$toast.success("取消成功");
              } else {
                this.$toast.fail(res.msg);
              }
            });
          } else if (this.titleName == "模拟考试") {
            mockcancelcollect({
              subjectid: this.subjectid,
              questionid: data.id,
            }).then((res) => {
              if (res.code == 200) {
                this.$toast.success("取消成功");
              } else {
                this.$toast.fail(res.msg);
              }
            });
          }
        }
      });
      if (!isyes) {
        this.Collectionlist.push({ questionid: data.id, isYes: true });
        if (!this.titleName) {
          exerCollect({ subjectid: this.subjectid, questionid: data.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$toast.success("收藏成功");
              } else {
                this.$toast.fail(res.msg);
              }
            }
          );
        } else if (this.titleName == "模拟考试") {
          mockcollect({ subjectid: this.subjectid, questionid: data.id }).then(
            (res) => {
              if (res.code == 200) {
                this.$toast.success("收藏成功");
              } else {
                this.$toast.fail(res.msg);
              }
            }
          );
        }
      }
    },
    //提交
    commit() {
      let msg = "";
      if (this.commitData.length < this.Ti.length) {
        msg = "您还没有做完，确定要交卷吗";
      } else {
        msg = "确定要交卷吗";
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: msg,
          showCancelButton: true,
        })
        .then(() => {
          this.$refs.time.pause();
          
          if (this.commitData.length > 0) {
            this.loading = true;
            this.isjiaojuan = false;
            let obj = {
              quizid: this.quizid,
              gz: this.gz,
            };

            // this.$router.push({
            //   path: "/result",
            //   query: {
            //     Unanswered: this.Unanswered,
            //     correct: this.correct,
            //     error: this.error,
            //     fraction: this.fraction,
            //     commitData: JSON.stringify(this.commitData),
            //     titleName: this.titleName,
            //   },
            // });
            quizDone(obj, {
              quizlog: JSON.stringify(this.commitData),
              use_time: this.NowTime,
            }).then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.$router.push({
                  path: "/results",
                  query: {
                    Unanswered: res.data.undo,
                    correct: res.data.done - res.data.wrong,
                    error: res.data.wrong,
                    fraction: res.data.score,
                    commitData: JSON.stringify(this.commitData),
                  },
                });
              }
            });
          } else {
            this.goBack()
          }
        });
    },

    //模拟考试

    //时间
    timeChange(val) {
      this.NowTime =
        Number(JSON.parse(getExectSetting()).考试时长.时长) * 60 -
        val.hours * 3600 -
        val.minutes * 60 -
        val.seconds;
    },
    //时间结束
    finishTime() {
      //时间结束  自动交卷
      this.ApiJJ();
    },
    //交卷接口  模拟考试
    ApiJJ() {
      this.$refs.time.pause();
      let obj = {
        quizid: this.quizid,
        gz: this.gz,
      };
      if (this.commitData.length > 0) {
        quizDone(obj, {
          quizlog: JSON.stringify(this.commitData),
          use_time: this.NowTime,
        }).then((res) => {});
      }
    },
    //复卷
    rewinding() {
      this.disabled = true;
      this.isDaAn = true;
      this.isjiaojuan = false;
      this.jjtc = false;
      // this.styleMap()
    },
    //答案展示样式
    daanStyle(val) {
      console.log(val,'098888');
      this.commitData.map((item) => {
        if (item.questionid == val.id && item.uanswer) {
          console.log(item,'00000');
          this.errORpass = Boolean(item.scored);
        }
      });
    },
    //默认样式改变
    styleMap() {
      this.Ti.map((item) => {
        item.type = this.Tistyle;
        this.commitData.map((element) => {
          if (item.id == element.questionid) {
            if (!this.disabled) {
              item.type = this.YDTistyle;
            } else {
              if (item.id == element.questionid) {
                if (Boolean(element.scored)) {
                  item.type = this.DDTistyle;
                } else {
                  item.type = this.DCTistyle;
                }
              } else {
                item.type = this.DQTistyle;
              }
            }
          }
        });
      });
    },
    //试题初始化调用
    creatFunction() {
        this.DXTi = [];
        this.MOTi = [];
        this.PDTi = [];
        this.ALTi = [];
        this.TIXU = 1;
        this.commitData = [];
        this.TiType = [];
        this.daan = "";
        // this.Ti.map((item,index)=>{
        //     item.name = index+1 //加入题序
        //     if(item.uanswer){
        //         this.commitData.push({questionid:item.id,uanswer:item.uanswer,scored:item.scored})
        //         this.TIXU=item.name
        //     }
        //     if(item.qtype=='单选'){
        //         this.DXTi.push(item)
        //     }
        //     if(item.qtype=='多选'){
        //         this.MOTi.push(item)
        //     }
        //     if(item.qtype=='判断'){
        //         this.PDTi.push(item)
        //     }
        // })
        let arr = getTi();
        arr.map((item, index) => {
          if (item.qtype == "单选") {
            item.tiTY = 1;
            this.DXTi.push(item);
          }
          if (item.qtype == "多选") {
            item.tiTY = 2;
            this.MOTi.push(item);
          }
          if (item.qtype == "判断") {
            item.tiTY = 3;
            this.PDTi.push(item);
          }
          if (item.qtype == "案例") {
            item.tiTY = 4;
            this.ALTi.push(item);
          }
        });
        this.Ti = arr.sort((a, b) => {
          return a.tiTY - b.tiTY;
        });

        this.Ti.map((item, index) => {
          item.name = index + 1; //加入题序
          if (item.qtype == "案例" && item.children) {
            item.children.map((el) => {
              if (el.uanswer) {
                this.commitData.push({
                  questionid: el.id,
                  uanswer: el.uanswer,
                  scored: el.scored,
                  qtype: el.qtype,
                  pid: item.id,
                });
              }
            });
          } else {
            if (item.uanswer) {
              this.commitData.push({
                questionid: item.id,
                uanswer: item.uanswer,
                scored: item.uanswer==item.answer?1:0,
              });
            }
          }

          if (
            this.$route.query.progress &&
            this.$route.query.progress == item.id
          ) {
            this.TIXU = item.name;
          }
          // if(this.$route.query.progress==0){
          //   if (item.uanswer) {
          //     this.TIXU = item.name;
          //   }
          // }
        });
        this.$forceUpdate()
        let A = true;
        let B = true;
        let C = true;
        let D = true;
        if (this.DXTi.length != 0) {
          this.DXTi.map((item, index) => {
            item.tixu = index + 1;
          });
          this.DXTi.map((item) => {
            if (!item.qtype) {
            }
          });
        } else {
          A = false;
        }
        if (this.MOTi.length != 0) {
          this.MOTi.map((item, index) => {
            item.tixu = this.DXTi.length + index + 1;
          });
        } else {
          B = false;
        }
        if (this.PDTi.length != 0) {
          this.PDTi.map((item, index) => {
            item.tixu = this.MOTi.length + this.DXTi.length + index + 1;
          });
          this.PDTi.map((item) => {
            if (!item.qtype) {
            }
          });
        } else {
          C = false;
        }
        if (this.ALTi.length != 0) {
          this.ALTi.map((item, index) => {
            item.tixu =
              this.MOTi.length + this.DXTi.length + this.PDTi.length + index + 1;
          });
          this.ALTi.map((item) => {
            if (!item.qtype) {
            }
          });
        } else {
          D = false;
        }
        this.TiType.push(this.DXTi, this.MOTi, this.PDTi, this.ALTi);
        let sum = 1;
        this.TiType.map((item) => {
          if (item.length != 0) {
            item[0].sum = sum++;
          }
        });
        if (A) {
          this.DQTI = this.TiType[0][0];
        } else if (B) {
          this.DQTI = this.TiType[1][0];
        } else if (C) {
          this.DQTI = this.TiType[2][0];
        } else if (D) {
          this.DQTI = this.TiType[3][0];
        }
        if (this.commitData.length != 0) {
          this.daan = this.commitData[this.commitData.length - 1].uanswer;
        }

        let TI = JSON.parse(JSON.stringify(this.Ti));
        if (Boolean(this.$route.query.commitData)) {
          this.commitData = JSON.parse(this.$route.query.commitData);
          console.log(this.commitData,'99999');
          this.rewinding();
          this.daanStyle(this.Ti[0]);
          if (this.$route.query.error) {
            this.Ti = [];
            this.commitData
              .filter((item) => {
                return !Boolean(item.scored);
              })
              .map((item, index) => {
                TI.map((it) => {
                  if (item.pid) {
                    if (it.id == item.pid) {
                      let isY = true;
                      this.Ti.map((el) => {
                        if (it.id == el.id) {
                          isY = false;
                        }
                      });
                      if (it.children) {
                        it.children.map((el) => {
                          if (el.id == item.questionid) {
                            if (el.qtype != "多选") {
                              el.uanswer = item.uanswer;
                            } else {
                              el.checkList = item.uanswer.split("");
                            }
                          }
                          el.noerror = false;
                          if (!el.uanswer && !el.checkList) {
                            el.noerror = true;
                            // if(el.qtype!='多选'){
                            //   el.uanswer=el.answer
                            // }else{
                            //   el.checkList=el.answer.split('')
                            // }
                          }
                        });
                      }
                      if (isY) {
                        it.name = index + 1; //加入题序
                        this.Ti.push(it);
                      }
                    }
                  } else {
                    if (it.id == item.questionid) {
                      it.name = index + 1; //加入题序
                      this.Ti.push(it);
                    }
                  }
                });
              });
          }
        } else {
          clearTimeout(this.facetimeObj);
          if (
            this.titleName == "正式考试" &&
            this.initObj.is_face &&
            JSON.parse(this.initObj.is_face)[this.gz].zsface == "开启" &&
            Number(JSON.parse(this.initObj.is_face)[this.gz].zsfacetime)
          ) {
            this.facetimeObj = setTimeout(() => {
              this.disFace = true;
            }, JSON.parse(this.initObj.is_face)[this.gz].zsfacetime * 60 * 1000);
          }
        }
        if (this.TIXU == 1) {
          this.enddisabled = false;
          this.downdisabled = true;
        } else if (this.TIXU == this.Ti.length) {
          this.downdisabled = false;
          this.enddisabled = true;
        } else {
          this.enddisabled = true;
          this.downdisabled = true;
        }
        if (this.TIXU == 1 && this.TIXU == this.Ti.length) {
          this.enddisabled = false;
          this.downdisabled = false;
        }
        if (this.gz == "fj") {
          this.rewinding();
          this.TIXU = 1;
        }
        this.styleChange(this.DQTI.tixu);
      },
  },
  watch: {
    TIXU(val) {
      this.styleChange(val);
    },
  },
  computed: {
    // ...mapGetters(['Ti']),//所有试题
    qtype: function () {
      return this.Current.qtype;
    },
  },
  created() {
    if (!getTi()) {
      this.$router.go(-1);
    }
    this.creatFunction();
  },
  beforeDestroy() {
    if (this.jjtc && this.isjiaojuan) {
      this.ApiJJ();
    }
  },
};
</script>

<style lang="scss" scoped>
//   '\e6a7'  叉号  '\e728'  对号
.video_title {
  display: flex;
  align-items: center;
  // padding: 0 12px;
  background: #327bff;
  color: #fff;
  height: 2.75rem;

  p {
    margin: 0;
    width: calc(100vw - 40px);
    display: flex;
    justify-content: center;
  }
  .icon {
    font-size: 1.25rem;
  }
}
::v-deep {
  .van-checkbox {
    min-height: 3.2rem;
  }
  .van-radio {
    min-height: 3.2rem;
  }
  .pd {
    display: flex;
    align-items: center;
    .van-radio__icon {
      display: flex;
      align-items: center;
    }
  }
  .van-radio__icon {
    min-height: 2.25rem;
  }
  .van-radio__label {
    font-size: 1rem;
  }
  .van-checkbox__icon {
    min-height: 2.25rem;
  }
  .van-checkbox__label {
    font-size: 1rem;
  }
  .van-radio__label--disabled {
    color: #323233;
  }
  .van-row {
    width: 100%;
  }
  .van-button--small {
    height: auto;
    padding: 0.35rem 0.75rem;
  }
  .van-icon-star:before {
    color: #ff9904;
  }
  // .van-checkbox__icon--checked{
  //     .van-icon-success{
  //         background: #fff;
  //         color:#1989fa;
  //     }
  //     .van-icon-success:before{
  //         content:'';
  //         // width: 5px;
  //         // height: 5px;
  //         // background: #fff;
  //     }
  // }
}
.titleBox {
  margin-bottom: 2.125rem;
  span {
    p {
      margin: 0;
      font-size: 0.75rem;
      color: #fff;
      background: #327bff;
      border-top-left-radius: 0.69rem;
      border-bottom-left-radius: 0.69rem;
      border-top-right-radius: 0.69rem;
      margin-right: 0.63rem;
      height: 1.19rem;
      width: 2.64rem;
      text-align: center;
      // display: inline-block;
      float: left;
    }
    font-size: 1.2rem;
  }
}
.button_box {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-around;
  .van-button--normal {
    padding: 0 3.09rem;
  }
}
.foot_box {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 50px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.9rem;
}
.img-icon {
  height: 2.25rem;
  width: 2.25rem;
}
.img-iconA {
  height: 1.8rem;
  width: 1.8rem;
  margin: 0 0.2rem;
}
.content {
  padding: 12px;
  height: 24.6rem;
  .XH_box {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-col {
    margin-bottom: 0.94rem;
  }
}
.tICade {
  display: flex;
  align-items: center;
}
.TIClass {
  // justify-content: space-around;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 4px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.daan_box {
  margin-top: 8px;
  padding: 1rem 1.75rem;
  background: #eeeeee;
  font-size: 1rem;
  p {
    margin: 0;
  }
}
</style>